<template>
  <div class="custom">
    <div class="search">
      <el-button type="primary" size="small" @click="editRef.drawer = true"
        >查看</el-button
      >
    </div>
    <el-table size="small" :data="list" style="width: 98%">
      <el-table-column label="序号" width="100" type="index" />
      <!-- <el-table-column v-if="false" prop="id" label="编号" width="100"  /> -->
      <el-table-column prop="userNickname" label="用户昵称" width="100" />
      <el-table-column prop="userName" label="用户姓名" width="100" />
      <el-table-column prop="userSex" label="用户性别" width="180" :formatter="genderFormatter"  />
      <el-table-column prop="phone" label="手机号码" width="120" />
      <el-table-column prop="userSelf" label="用户自我介绍" width="120" />
    </el-table>
    <el-pagination
      style="margin-top: 10px"
      small
      background
      layout="prev, pager, next"
      :total="list.length"
      v-model:current-page="pageIndex"
    />
    <EditRoomType ref="editRef" @sync-list="loadList"></EditRoomType>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'

import { $showAllInfo } from '../../api/guest.ts'
import { ElNotification } from 'element-plus'
//用户列表
const list = ref([])

//加载入住用户列表
const loadList = async () => {
  list.value= await $showAllInfo();
  console.log(list.value)
  // let ret = await $showAllInfo()

  return list.value
}
const genderFormatter = (row: any) => {
  return row.userSex === 1 ? '男' : '女';
};
onMounted(() => {
  loadList()
}) 
</script>

<style lang="scss" scoped>
.search {
  margin-bottom: 5px;
}

.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
